<template>
  <div>
    <header class='p-20'>
        <InputSearch size='large' class='w-per-100' v-model:value='keyword' allow-clear placeholder='请输入关键词' />
    </header>
    <Table :columns="columns" :data-source="data" :scroll="{y: offsetheight - 610}" :pagination="false" :customRow="customRow" :rowClassName='(record)=>`record-${record.id}`'>
        <template #bodyCell="{ column, text, record, index }">
            <span v-if='column.dataIndex === "index"'>{{ index + 1 }}</span>
            <div v-else-if='column.dataIndex === "商品图"' class='w-per-100 h-per-100 f-c'>
                <img :src='text' class='w-80' />
            </div>
            <div v-else-if='column.dataIndex === "商品名"' class='w-per-100 h-per-100 f-s-c'>
                <span class='t-l f-s-18 f-w-600 c-666'>{{text}}</span>
            </div>
            <div v-else-if='column.dataIndex === "促销"' class='w-per-100 f-c'>
                <span class='c-red f-w-600 f-s-18'>{{ text }}</span>
            </div>
            <div v-else-if='column.dataIndex === "双十一价格"' class='w-per-100 f-c'>
                <span class='c-red f-w-600 f-s-18' v-html="text"></span>
            </div>
            <div v-else-if='column.dataIndex === "action"' class='w-per-100 f-c'>
                <span class='h-40 w-100 f-s-16 f-w-600 f-c b-r-10' style="background: #4caf50;border-radius: 20px; color: #fff" @click.stop="onCopy(record)">立即种草</span>
            </div>
        </template>
    </Table>
    <aside v-if="current" id="aside-rect" class='p-f-c w-per-100 shadow-app z-5 bg-color-fff'>
        <div class='w-per-100 h-240 f-s-c p-r'>
            <!-- < img :src='Icon' class='p-a-xr-yt m-t-20 m-r-20 w-30' @click="current=null"> -->
            <section class='w-80 f-c f-s-18'>{{ current.index }}</section>
            <section class='w-200'>
                <img :src="current['商品图']" alt="" class='w-200'>
            </section>
            <section class='f-1 h-per-100 f-column justify-b p-tb-40 p-l-20'>
                <h2 class='c-red f-s-18 f-w-600'>{{ current['商品名'] }}</h2>
                <h3 class='c-666 f-s-14'>{{ current['促销'] }}</h3>
                <footer>
                    <div class='f-s-c p-l-0'>
                        <span class='c-red f-s-20 f-w-600' v-html='current["双十一价格"]'></span>
                        <span class='h-30 w-100 m-l-10 f-s-16 f-w-600 f-c b-r-10' style="background: #4caf50;border-radius: 20px; color: #fff" @click.stop="onCopy(current)">立即种草</span>
                    </div>
                </footer>
            </section>
        </div>
    </aside>
  </div>
</template>

<script setup>
import { Table, InputSearch } from 'ant-design-vue'
import { computed, onMounted, ref, watch } from 'vue'
import Icon from '../assets/close.png'
const props = defineProps(['list', 'tab'])
const offsetheight = window.innerHeight
const columns = [
    {
        title: '',
        width: '80px',
        dataIndex: 'index',
    },
    {
        title: '商品图',
        width: '100px',
        dataIndex: '商品图',
        align: 'center',
    },
    {
        title: '商品名称',
        width: '120px',
        dataIndex: '商品名',
        align: 'center'
    },
    {
        title: '必买理由',
        width: '120px',
        dataIndex: '促销',
        align: 'center',
    },
    {
        title: '双11价格',
        width: '150px',
        dataIndex: '双十一价格',
        align: 'center',
    },
    {
        title: '复制口令',
        dataIndex: 'action',
        align: 'center',
    },
]
const current = ref(null)
const keyword = ref('')
const data = computed(() => {
    return props.list.filter(o => o['商品名'].includes(keyword.value)).map((o, index) => ({
        ...o,
        index: index + 1,
    }))
})


const customRow = record => ({
    onClick() {
        console.log(record)
        current.value = record
    },
})

function copy(textValue) {
  // 动态创建 textarea 标签
  const textarea = document.createElement('textarea')
  // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
  textarea.readOnly = 'readonly'
  textarea.style.position = 'absolute'
  textarea.style.left = '-9999px'
  // 将要 copy 的值赋给 textarea 标签的 value 属性
  textarea.value = textValue
  // 将 textarea 插入到 body 中
  document.body.appendChild(textarea)
  // 选中值并复制
  textarea.select()
  const result = document.execCommand('Copy')
  if (result) {
    // Vue.prototype.$message({
    //   message: '复制成功',
    //   type: 'success'
    // });
    alert('复制成功，快去tb抢购吧')
  }
  document.body.removeChild(textarea)
}

const onCopy = record => {
    copy(record['推广链接'])
}

const onLink = record => {
    // console.log(record)SelectorAll('tbody tr')
    for (let i=0; i<trs.length; i++) {
        const rect = trs[i].getBoundingClientRect()
        if (rect.y - top < 100 && rect.y > top) {
            // console.log(trs[i], trs[i].className)
            const id = trs[i].className.split('record-')[1]
            const d = data.value.find(o => o.id === id)
            current.value = d
        }
    }
}

const onScroll = () => {
    const top = window.innerHeight / 2 - 120
    const trs = document.querySelectorAll('tbody tr')
    for (let i=0; i<trs.length; i++) {
        const rect = trs[i].getBoundingClientRect()
        if (rect.y - top < 100 && rect.y > top) {
            // console.log(trs[i], trs[i].className)
            const id = trs[i].className.split('record-')[1]
            const d = data.value.find(o => o.id === id)
            current.value = d
        }
    }
}

watch(
    () => props.tab,
    () => {
        current.value = null
    }
)

onMounted(() => {
    setTimeout(() => {
        document.querySelector('.ant-table-body').addEventListener('scroll', onScroll)
        onScroll()
    }, 500)
})
</script>

<style>
* {
    box-sizing: border-box;
}
.ant-table-wrapper .ant-table {
    font-size: 20px!important
}
.shadow-app {
    box-shadow: 0 0 16px 0px #9E9E9E;
}
</style>
    const link = record['推广链接']
    // console.log(2, link)
    const links = link.split(' ')
    const httpLink = links.find(str => str.includes('http'))
    const strs = httpLink.split('http')
    // console.log(strs)
    const str = `http${strs[1]}`
    // alert(str)
    window.location.href = str
}

const onScroll = () => {
    const top = window.innerHeight / 2 - 120
    const trs = document.query